<template>
  <view class="red-package-info" :style="{display: show ? 'flex':'none'}">
    <view class="package-info">
      <view class="package-content">
        <view class="user-package">
          <view class="pic">
            <image :src="info.avatar_pic"></image>
          </view>
          <view class="name">
            <text>{{info.nickname}}的红包</text>
          </view>
        </view>
        <view class="title-package">
          <text>{{info.content}}</text>
        </view>
        <view class="open-btn">
          <view class="hint" @click="onToDetails" v-if="info.check">
            <text>红包已领取，点击查看详情</text>
          </view>
          <view class="btn" :class="{'loading-btn':openLoading}" @click="onGetRedPacket" v-else>
            <text>開</text>
          </view>
        </view>
      </view>
    </view>
    <view class="close-btn">
      <view class="btn" @click="close">
        <image src="/static/images/icon/close_icon.png"></image>
      </view>
    </view>
  </view>
</template>

<script setup>

import {ref} from "vue";
import {getRedPacket} from "../../../../api/wallet";

const emits = defineEmits(['getConfirm']);

const show = ref(false);
const info = ref({});
const chatIndex = ref(-1);
const openLoading = ref(false);

function open(item = {},index = -1){
  info.value = item;
  chatIndex.value = index;
  show.value = true;
}

function close(){
  show.value = false;
}

/**
 * 开红包点击
 */
function onGetRedPacket(){
  openLoading.value = true;
  getRedPacket({
    red_packet_id: info.value.extend_id,
  }).then(res =>{
    setTimeout(() =>{
      close();
      openLoading.value = false;
      emits('getConfirm',chatIndex.value);
      uni.navigateTo({
        url: `/pages/RedPacketResult/RedPacketResult?red_packet_id=${info.value.extend_id}`
      })
    },1000)
  })
}

/**
 * 查看详情点击
 */
function onToDetails(){
  close();
  uni.navigateTo({
    url: `/pages/RedPacketResult/RedPacketResult?red_packet_id=${info.value.extend_id}`
  })
}
defineExpose({
  open,
  close,
})
</script>

<style scoped lang="scss">
@import "RedPacketPopup.scss";
</style>
